<template>
<!-- 关于我们 -->
    <div class='regardsmy'>
        <div class="addserve" :style='{top:styleall}'>
            <el-button @click="addserve" class="fr" size="small" type="primary">保存</el-button>
        </div>
        <el-form ref="form" class="resform" label-width="120px">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>关于我们</span>
                </div>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="上图">
                            <uploadItem @openimg='openimg' :item='about_us' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="下图">
                            <uploadItem @openimg='openimg' :item='about_us' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>   
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>发展历史</span>
                    <el-button @click="addhistory" class="fr" size="small" type="primary">添加历史</el-button>
                </div>
                    <div v-for='(it,inx) in history' :key="inx">
                        <el-row class="mb10" :gutter="10">
                            <el-col :span="11">
                                <el-form-item class="is-required" label="历史标题">
                                    <el-input v-model="it.input1" placeholder="请输入内容" ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="历史描述">
                                    <el-input v-model="it.input2" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-button @click="delhistory(inx)" class="fr" icon="el-icon-delete" size="small" type="danger">删除</el-button>
                            </el-col>
                        </el-row>
                        <el-row class="mb10" :gutter="10">
                            <el-col :span="11">
                                <el-form-item label="历史图片">
                                    <uploadItem @openimg='openimg' :item="it" :imgname="'img1'"></uploadItem>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>合作杂志社</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="our_cooperative_magazine.input1" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述">
                            <el-input v-model="our_cooperative_magazine.input2" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="内容一标题">
                            <el-input v-model="our_cooperative_magazine.input2" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="内容一描述">
                            <el-input v-model="our_cooperative_magazine.input3" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="内容二标题">
                            <el-input v-model="our_cooperative_magazine.input4" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="内容二描述">
                            <el-input v-model="our_cooperative_magazine.input5" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="内容三标题">
                            <el-input v-model="our_cooperative_magazine.input6" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="内容三描述">
                            <el-input v-model="our_cooperative_magazine.input7" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="内容四标题">
                            <el-input v-model="our_cooperative_magazine.input8" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="内容四描述">
                            <el-input v-model="our_cooperative_magazine.input9" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="内容五标题">
                            <el-input v-model="our_cooperative_magazine.input10" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="内容五描述">
                            <el-input v-model="our_cooperative_magazine.input11" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="左图">
                            <uploadItem @openimg='openimg' :item='our_cooperative_magazine' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="中图">
                            <uploadItem @openimg='openimg' :item='our_cooperative_magazine' :imgname="'img3'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="右图">
                            <uploadItem @openimg='openimg' :item='our_cooperative_magazine' :imgname="'img4'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>官方资源</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="resources.input1" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述">
                            <el-input v-model="resources.input2" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="上图">
                            <uploadItem @openimg='openimg' :item='resources' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="下图">
                            <uploadItem @openimg='openimg' :item='resources' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="下图">
                            <uploadItem @openimg='openimg' :item='resources' :imgname="'img3'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row> -->
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>联系我们</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="邮箱">
                            <el-input v-model="contact_us.input1" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="地址">
                            <el-input v-model="contact_us.input2" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import uploadItem from "@/views/web/components/uploadItem";
import { selectPages,addPageValue,updatePageValue} from "@/api/pc.js"
export default {
    data(){
       return{
        uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        headers: { Authorization: "Bearer " + getToken()},
        // 图片弹窗
        dialogVisible:false,
        // 弹窗图片地址
        dialogImageUrl:'',
        // 关于
        about_us:{img1:'',img2:'',},
        // 发展历史
        history:[],
        // 合作杂志社
        our_cooperative_magazine:{input1:'',input2:'',input3:'',input4:'',input5:'',input6:'',input7:'',input8:'',input9:'',input10:'',input11:'',img1:'',img2:'',img3:'',img4:''},
        // 官方资源
        resources:{input1:'',input2:'',img1:'',img2:'',img3:'',},
        // 联系我们
        contact_us:{input1:'',input2:''},
        // 编辑
        edit:false,
        // 编辑
        pageId:'',
        // 样式
        styleall:{},
       }
    },
    components:{uploadItem},
    mounted(){this.getdata();window.addEventListener('scroll',this.handleScroll);},
    methods:{
        // 滚动事件
        handleScroll(){
            // 滚动条偏移量
            let scrollTop = document.documentElement.scrollTop;
            if(scrollTop>80){this.styleall ='0px';}else{ this.styleall =(80 - scrollTop) +'px'; }
        },
        // 保存
        addserve(){
            for(var i =0;i<this.history.length; i++){
                if(!this.history[i].input1){
                    return this.$message.warning("请填写公司历史标题")
                }
            }
            let objall = {
                about_us:this.about_us,
                history:this.history,
                our_cooperative_magazine:this.our_cooperative_magazine,
                resources:this.resources,
                contact_us:this.contact_us,
            }
            let obj={pageName:'关于我们',pageType:'regardsmy',pageValue:JSON.stringify(objall),}
            if(!this.edit){
                addPageValue(obj).then(res=>{
                    console.log(res)
                    if(res.code==200){this.$message.success('保存成功！')}
                })
            }else{
                obj.pageId = this.pageId;
                updatePageValue(obj).then(res=>{
                    console.log(res)
                    if(res.code==200){this.$message.success('更新成功！')}
                })
            }
        },
        // 获取数据
        getdata(){
            selectPages({pageType:'regardsmy'}).then(res=>{
                if(res.code==200){
                    console.log(JSON.parse(res.data[0].pageValue))
                    if(res.data.length==0){
                        this.edit = false;
                    }else{
                        this.edit = true;
                        this.pageId = res.data[0].pageId;
                        console.log(JSON.parse(res.data[0].pageValue))
                        let obk = JSON.parse(res.data[0].pageValue);
                        this.about_us = obk.about_us;
                        this.contact_us = obk.contact_us;
                        obk.history.forEach(it=>{this.history.push({input1:'',input2:'',img1:''})})
                        this.history = obk.history;
                        this.our_cooperative_magazine = obk.our_cooperative_magazine;
                        this.resources = obk.resources;
                    }
                }
            })
        },
        // 添加历史
        addhistory(){
            let obj={input1:'',input2:'',img1:''};
            this.history.push(obj)
        },
        // 删除历史
        delhistory(val){
            this.history.splice(val,1)
        },
        // 打开全屏图片
        openimg(val){
            this.dialogImageUrl = val;
            this.dialogVisible = true;
        },
    }
}
</script>
<style lang='scss' scoped>
.regardsmy{
    width: 100%;
    height: 100%;
    padding: 20px;
    padding-top: 50px;
}
.addserve{
    width: 100%;
    height: 40px;
    position: fixed;
    top:80px;
    left: 0;
    background-color: #fff;
    padding-right: 30px;
    z-index: 101;
    button{
        margin-top: 4px;
        width: 100px;
    }
}
</style>